<template>
  <div class="user">
    <div style="padding-bottom:50px">
      <!-- /**头部1 */ -->
      <div class="top" @click="jumpUser" v-if="identity">
        <div class="flex align-center" style="padding:20px 15px 0;">
          <div class="flex-1 flex">
            <img class="headUrl" v-if="userInfo" :src="userInfo.headImg" alt />
            <img class="headUrl" v-else src="/static/images/user/headImg.png" alt />
            <div class="grade flex-1" style="align-self: center;">
              <div v-if="userInfo">
                <p class="topName">{{userInfo.realName?userInfo.fullName:userInfo.nickName}}</p>
                <div class="crown flex">
                  <div>
                    <img src="/static/images/user/crown.png" alt />
                    <p>{{levelName}}</p>
                  </div>
                </div>
              </div>
              <button
                v-else
                class="info"
                @click.stop="getUserInfo"
                size="mini"
                type="default"
                plain="true"
                hover-class="none"
              >点击登录</button>
            </div>
          </div>
          <img v-if="userInfo" class="icon_right" src="/static/images/user/icon_right.png" alt />
        </div>
        <div class="bottom">
          <div class="flex align-center" style="padding:0 4px">
            <div class="flex-1 flex align-center">
              <img class="level" src="/static/images/user/level_left.png" alt />
              <!--  -->
              <div class="flex-1">
                <p class="flex number">
                  <span>{{level1.min}}</span>
                  <span>{{level2.min}}</span>
                </p>
                <div class="across" v-if="userInfo">
                  <!-- :style="{width:(userInfo.totalIntegral-scoreList[scoreIndex].min)/(scoreList[scoreIndex + 1].min-scoreList[scoreIndex ].min)+'%'}" -->
                  <p class="progress" :style="{width:Percentage*100+'%'}"></p>
                  <div style="padding-top:3px;position:relative">
                    <div class="arrows" :style="{left:Percentage>0.9?'88%':Percentage*100+'%'}">
                      <p style="padding-top:2px" v-if="userInfo">{{userInfo.totalIntegral}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <img class="level" src="/static/images/user/level_right.png" alt />
            </div>
          </div>
          <div class="flex" style="justify-content:space-between">
            <p style="font-size:10px;color:#fff;">{{level1.name}}</p>
            <p style="font-size:10px;color:#fff;">{{level2.name}}</p>
          </div>
        </div>
      </div>
      <!-- 头部2 -->
      <div class="top2" v-else @click="jumpUser">
        <div class="flex align-center" style="padding:30px 15px 0;">
          <div class="flex-1 flex">
            <img class="headUrl" v-if="userInfo" :src="userInfo.headImg" alt />
            <img class="headUrl" v-else src="/static/images/user/headImg.png" alt />
            <div class="grade flex-1" style="align-self: center;">
              <p
                class="topName"
                v-if="userInfo"
              >{{userInfo.realName?userInfo.fullName:userInfo.nickName}}</p>
              <button
                v-else
                class="info"
                @click.stop="getUserInfo"
                size="mini"
                type="default"
                plain="true"
                hover-class="none"
              >点击登录</button>
            </div>
          </div>
          <img v-if="userInfo" class="icon_right" src="/static/images/user/icon_right.png" alt />
        </div>
      </div>
      <div class="topRadius" v-if="!identity"></div>
      <div class="double flex" v-if="identity">
        <div class="product shadow1" @click="jump(1)">
          <span style="margin-left:12px">我的产品</span>
        </div>
        <div class="product shadow2" @click="jump(2)">
          <span style="margin-left:12px">我的活动</span>
        </div>
      </div>
      <div style="padding-left:18px;" :style="{marginTop:identity?'15px':'5px'}">
        <div class="content">
          <div
            v-if="identity"
            class="flex align-center"
            style="padding-bottom:25px"
            @click="jump(3)"
          >
            <div class="flex-1 leftIcon flex">
              <img style="width:18px;height:18px" src="/static/images/user/icon3.png" alt />
              <p>实名认证</p>
            </div>
            <span class="rightSize" v-if="userInfo ">{{userInfo.realName?"已认证":"未认证"}}</span>
            <img class="right" src="/static/images/user/icon_right.png" alt />
          </div>
          <div v-if="!identity" class="flex align-center" style="padding:25px 0" @click="jump(10)">
            <div class="flex-1 leftIcon flex">
              <img style="width:18px;height:18px" src="/static/images/user/icon11.png" alt />
              <p>{{userInfo?"我的客户":"实名认证"}}</p>
            </div>
            <img class="right" src="/static/images/user/icon_right.png" alt />
          </div>
          <div
            v-if="identity"
            class="flex align-center"
            style="padding-bottom:25px"
            @click="jump(4)"
          >
            <div class="flex-1 leftIcon flex">
              <img style="width:18px;height:18px" src="/static/images/user/icon4.png" alt />
              <p>风险测评</p>
            </div>
            <span class="rightSize" v-if="userInfo ">{{userInfo.passRisk?"已测评":"未测评"}}</span>
            <img class="right" src="/static/images/user/icon_right.png" alt />
          </div>
          <div
            v-if="!identity"
            class="flex align-center"
            style="padding-bottom:25px"
            @click="jump(5)"
          >
            <div class="flex-1 leftIcon flex">
              <img style="width:18px;height:18px" src="/static/images/user/icon5.png" alt />
              <p>我的收藏</p>
            </div>
            <img class="right" src="/static/images/user/icon_right.png" alt />
          </div>
        </div>
      </div>
      <div style="padding-left:18px">
        <div class="content">
          <div v-if="identity" class="flex align-center" style="padding:25px 0" @click="jump(5)">
            <div class="flex-1 leftIcon flex">
              <img style="width:18px;height:18px" src="/static/images/user/icon5.png" alt />
              <p>我的收藏</p>
            </div>
            <img class="right" src="/static/images/user/icon_right.png" alt />
          </div>
        </div>
      </div>
      <div style="padding-left:18px">
        <div class="content">
          <div class="flex align-center" style="padding:25px 0" @click="jump(6)">
            <div class="flex-1 leftIcon flex">
              <img style="width:18px;height:18px" src="/static/images/user/icon6.png" alt />
              <p>我的订单</p>
            </div>
            <img class="right" src="/static/images/user/icon_right.png" alt />
          </div>
          <div class="flex align-center" style="padding-bottom:25px" @click="jump(7)">
            <div class="flex-1 leftIcon flex">
              <img style="width:18px;height:18px" src="/static/images/user/icon7.png" alt />
              <p>我的积分</p>
            </div>
            <span class="rightSize" v-if="userInfo">{{userInfo.integral}}积分</span>
            <img class="right" src="/static/images/user/icon_right.png" alt />
          </div>
          <div class="flex align-center" style="padding-bottom:25px" @click="jump(8)">
            <div class="flex-1 leftIcon flex">
              <img style="width:18px;height:18px" src="/static/images/user/icon8.png" alt />
              <p>收货地址</p>
            </div>
            <img class="right" src="/static/images/user/icon_right.png" alt />
          </div>
        </div>
      </div>
      <div style="padding-left:18px">
        <div class="content">
          <div class="flex align-center" style="padding:25px 0" @click="jump(9)">
            <div class="flex-1 leftIcon flex">
              <img style="width:18px;height:18px" src="/static/images/user/icon9.png" alt />
              <p>我的二维码</p>
            </div>
            <img class="right" src="/static/images/user/icon_right.png" alt />
          </div>
          <div
            v-if="identity"
            class="flex align-center"
            style="padding-bottom:25px"
            @click="jump(11)"
          >
            <div class="flex-1 leftIcon flex">
              <img style="width:18px;height:18px" src="/static/images/user/icon11.png" alt />
              <p>我的引荐客户</p>
            </div>
            <img class="right" src="/static/images/user/icon_right.png" alt />
          </div>
        </div>
      </div>
      <div style="padding-left:18px;padding-bottom:26px">
        <div class="content">
          <div class="flex align-center" style="margin:25px 0">
            <div class="flex-1 leftIcon flex">
              <img style="width:18px;height:18px" src="/static/images/user/icon1.png" alt />
              <button
                class="contat flex-1"
                size="mini"
                type="default"
                plain="true"
                hover-class="none"
                open-type="contact"
              >在线客服</button>
            </div>
            <img class="right" src="/static/images/user/icon_right.png" alt />
          </div>
          <div class="flex align-center" style="padding-bottom:25px" @click="jumpTel">
            <div class="flex-1 leftIcon flex">
              <img style="width:18px;height:18px" src="/static/images/user/icon_phone.png" alt />
              <!-- <i class="iconfont iconkefudianhua"></i> -->
              <p>客服电话</p>
            </div>
            <span class="rightSize" v-if="companyPhone">{{companyPhone}}</span>
            <img class="right" src="/static/images/user/icon_right.png" alt />
          </div>
        </div>
      </div>
    </div>
    <vueTabBar :selectNavIndex="number" :target="target"></vueTabBar>
    <!-- <i class="iconfont iconfengxianceping"></i> -->
  </div>
</template>

<script>
//  apiWechatAuthMini,
import { info, companyInfo, levelConfig } from "@/api/api";
import vueTabBar from "@/components/tabbar";
export default {
  props: {},
  data() {
    return {
      number: 4,
      identity: false,
      userInfo: null,
      companyPhone: null,
      scoreIndex: 0,
      level1: {},
      level2: {},
      Percentage: "",
      target: 0,
      levelName: "",
      companyDetail: null,
      scoreList: [
        {
          min: "",
          name: ""
        },
        {
          min: "",
          name: ""
        }
      ]
    };
  },
  components: { vueTabBar },
  created() {},

  onShow() {
    this.target += 1;
    wx.hideTabBar();
    this.getInfo();
  },
  onLoad: function() {
    wx.hideTabBar({
      fail: function() {
        setTimeout(function() {
          wx.hideTabBar();
        }, 500);
      }
    });
  },
  mounted() {
    // Object.assign(this.$data, this.$options.data());
    this.number = 4;
    this.companyInfo();
  },
  onPullDownRefresh() {
    // Object.assign(this.$data, this.$options.data());
    this.getInfo();
    this.companyInfo();
    // 停止下拉刷新
    wx.stopPullDownRefresh();
  },
  watch: {},
  methods: {
    /** 获取用户信息 */
    async getInfo() {
      wx.showLoading({
        title: "加载中",
        icon: "none",
        mask: true
      });
      await info()
        .then(res => {
          wx.hideLoading();
          if (res === "") {
            wx.removeStorageSync("userInfo");
          }
          this.userInfo = res === "" ? null : res.headImg ? res : null;
          if (!res.code) {
            // 登录者的身份：FINANCIAL.理财师,USER.普通用户
            this.identity = res.identity === "USER";
            if (res.identity === "FINANCIAL") {
              this.number = 3;
            } else {
              this.number = 4;
            }
            // if (!res.identity === 'USER') {
            this.levelConfig();
            // }
          }
        })
        .catch(msg => {
          console.log(msg);
        });
    },
    async companyInfo() {
      await companyInfo().then(res => {
        this.companyPhone = res.companyPhone;
        this.companyDetail = res.companyDetail;
      });
    },
    /** 等级 */
    async levelConfig() {
      await levelConfig().then(res => {
        this.scoreList = res.reverse();
        const score = this.userInfo.totalIntegral;
        // this.userInfo.totalIntegral = 120;
        console.log(this.scoreList, "ttttttttttt");
        if (score >= Number(this.scoreList[0].min)) {
          this.level1 = this.scoreList[1];
          this.level2 = this.scoreList[0];
          this.levelName = this.level2.name;
          this.Percentage = 1;
          return;
        }

        for (let i = 0; i < this.scoreList.length; i++) {
          if (
            score >= this.scoreList[i].min &&
            score < this.scoreList[i - 1].min
          ) {
            this.level1 = this.scoreList[i];
            this.level2 = this.scoreList[i - 1];
            this.levelName = this.level1.name;
            this.Percentage =
              (score - this.scoreList[i].min) /
              (this.scoreList[i - 1].min - this.scoreList[i].min);
          }
        }
        console.log(this.Percentage, "yyyyyyyyyyy");
      });
    },

    /** 注册,实名认证，风险测评 */
    register(type) {
      if (this.userInfo) {
        if (this.userInfo.openidMp) {
          if (!this.userInfo.reg) {
            wx.navigateTo({
              url: "/pages/index/children/register/main"
            });
            return true;
          } else {
            if (type === 4 || type === 5) {
              if (this.identity) {
                if (!this.userInfo.realName) {
                  wx.navigateTo({
                    url: "/pages/PersonalCenter/userChildren/verified/main"
                  });
                  return true;
                }
                if (!this.userInfo.passRisk) {
                  wx.navigateTo({
                    url:
                      // '/pages/PersonalCenter/userChildren/evaluation/evaluation/main'
                      "/pages/PersonalCenter/userChildren/evaluation/startEvaluation/main"
                  });
                  return true;
                }
              }
            }
          }
        } else {
          wx.navigateTo({
            url: `/pages/webView/main`
          });
          return true;
        }
        // else {
        // }
      }
    },
    /** 跳转到个人中心 */
    jumpUser() {
      if (this.getUserInfo()) {
        return true;
      }
      // if (!this.userInfo) {
      //   this.getUserInfo();
      // }
      if (this.register()) {
        return true;
      }
      wx.navigateTo({
        url: "/pages/PersonalCenter/userChildren/information/main"
      });
    },
    /** 跳转 */
    jump(type) {
      if (this.getUserInfo()) {
        return true;
      }
      // if (!this.userInfo) {
      //   this.getUserInfo();
      // }
      // this.register(type);
      if (this.register(type)) {
        return true;
      }
      switch (type) {
        case 1: // 我的产品
          wx.navigateTo({
            url: "/pages/PersonalCenter/userChildren/product/main"
          });
          break;
        case 2: // 我的活动
          wx.navigateTo({
            url: "/pages/PersonalCenter/userChildren/active/myActive/main"
          });
          break;
        case 3: // 实名认证
          wx.navigateTo({
            url: "/pages/PersonalCenter/userChildren/verified/main"
          });
          break;
        case 4: // 风险测评
          if (this.userInfo.passRisk) {
            wx.navigateTo({
              url:
                "/pages/PersonalCenter/userChildren/evaluation/evaluationResult/main?level=" +
                this.userInfo.riskLevel
            });
          } else {
            wx.navigateTo({
              url:
                "/pages/PersonalCenter/userChildren/evaluation/startEvaluation/main"
            });
          }
          break;
        case 5 /** 我的收藏 */:
          wx.navigateTo({
            url: `/pages/PersonalCenter/userChildren/collect/main?identity=${
              this.userInfo.identity
            }`
          });
          break;
        case 6 /** 我的订单 */:
          wx.navigateTo({
            url: "/pages/PersonalCenter/userChildren/myOrder/myOrder/main"
          });
          break;
        case 7 /** 我的积分 */:
          wx.navigateTo({
            url:
              "/pages/PersonalCenter/userChildren/myIntegral1/myIntegral/main?integral=" +
              this.userInfo.integral
          });
          break;
        case 8 /** 收货地址 */:
          wx.navigateTo({
            url: "/pages/store/children/choiceAddress/main"
          });
          break;
        case 9 /** 我的二维码 */:
          wx.navigateTo({
            url:
              "/pages/PersonalCenter/userChildren/QRcode/main?companyDetail=" +
              this.companyDetail
          });
          break;
        case 10 /** 我的客户 */:
          wx.navigateTo({
            url: "/pages/PersonalCenter/userChildren/client/myClient/main"
          });
          break;
        case 11 /** 我引荐的客户 */:
          wx.navigateTo({
            url:
              "/pages/PersonalCenter/userChildren/client/recommendClient/main"
          });
          break;
        default:
          break;
      }
    },
    // 未授权
    getUserInfo() {
      if (!this.userInfo) {
        wx.navigateTo({
          url: `/pages/PersonalCenter/userChildren/authorization/main`
        });
        return true;
      }
      /** 授权 */
    },
    /** 客服电话 */
    jumpTel() {
      wx.makePhoneCall({
        phoneNumber: this.companyPhone // 仅为示例，并非真实的电话号码
      });
    }
  }
};
</script>

<style scoped lang="less">
.user {
  .contat {
    border: none;
    font-size: 14px;
    text-align: left;
    color: #020604;
    font-weight: bold;
    padding-left: 10px;
  }
  .info {
    border: none;
    font-size: 20px;
    color: #020604;
    font-weight: bold;
    padding: 0;
  }
  .arrows {
    position: absolute;
    width: 30px;
    height: 22px;
    background: url("https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/score_icon.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 22px;
    font-size: 11px;
    color: #fff;
  }
  .topRadius {
    height: 11px;
    width: 100%;
    background: rgba(255, 255, 255, 1);
    border-radius: 15px 15px 0px 0px;
    margin-top: -9px;
  }
  .number {
    justify-content: space-between;
    font-size: 11px;
    color: #e0b778;
    margin-top: -15px;
  }
  .progress {
    // width: 30%;
    height: 100%;
    background: linear-gradient(
      13deg,
      rgba(220, 173, 102, 1) 0%,
      rgba(246, 236, 208, 1) 100%
    );
    border-radius: 6px;
  }
  .top2 {
    widows: 100%;
    height: 170px;
    background: url("https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/bg2.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .shadow1 {
    background: url("https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/product.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: 0px 0px 20px 0px rgba(158, 190, 190, 0.3);
  }
  .shadow2 {
    background: url("https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/activity.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: 0px 0px 20px 0px rgba(216, 174, 110, 0.3);
  }
  .leftIcon {
    align-items: center;
    // p {
    font-size: 14px;
    font-weight: 700;
    // }
    p {
      margin-left: 10px;
    }
  }
  .rightSize {
    font-size: 14px;
    color: #6b6b6b;
  }
  .right {
    width: 10px;
    height: 14px;
    margin-left: 8px;
  }
  .double {
    justify-content: space-between;
    padding: 10px 15px;
    .product {
      height: 80px;
      width: 166px;
      line-height: 80px;
      font-size: 15px;
      color: #fff;
    }
  }
  .content {
    padding-right: 18px;
    border-bottom: 0.5px solid #e6e6e6;
  }
  .top {
    background: url("https://qinghe-zichan.oss-cn-shanghai.aliyuncs.com/imgs/topBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 213px;
  }
  .title {
    font-size: 14px;
    padding-top: 30px;
    // font-weight: bold;
    color: #333;
    text-align: center;
  }
  .bottom {
    padding: 30px 31px 0;
  }
  .headUrl {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 15px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
    border: 4px solid rgba(255, 255, 255, 1);
  }
  .across {
    height: 4px;
    background: rgba(99, 157, 171, 1);
    border-radius: 6px;
  }
  .level {
    width: 34px;
    height: 34px;
  }
  .grade {
    .topName {
      color: #020604;
      font-size: 20px;
      font-weight: bold;
    }
    .crown {
      color: #35b5af;
      margin-top: 6px;
      font-size: 11px;
      img {
        width: 12px;
        height: 11px;
        margin-right: 3px;
      }
      div {
        align-items: center;
        display: flex;
        padding: 4px 8px;
        border: 1px solid #35b5af;
        border-radius: 12px;
      }
    }
  }
  .icon_right {
    width: 10px;
    height: 14px;
  }
}
</style>
